//
//  HomeNavView.swift
//  HomeNavView
//
//  Created by Ben on 2021/8/13.
//

import SwiftUI
import SDWebImageSwiftUI

struct HomeNavView: View {
    @EnvironmentObject var customTabbarVM: CustomTabbarViewModel
    
    @State var isActive = false
    var body: some View {
        VStack {
            
            HStack {
                AnimatedImage(name: "home_sign.gif")
                    .resizable()
                    .aspectRatio(contentMode: .fit)
                    .frame(width: 46, height: 46)
                    .clipShape(Circle())
                
                Spacer()
                
                ZStack(alignment: .bottom) {
                    Image("miyo")
                        .resizable()
                        .aspectRatio(contentMode: .fit)
                        .frame(width: 46, height: 46)
                        .clipShape(Circle())
                        .overlay(
                            RoundedRectangle(cornerRadius: 23)
                                .stroke(Color(hex: 0xF83A74), lineWidth: 4)
                                .padding(2)
                        )
                    
                    HStack(spacing: 4) {
                        Color.white.clipShape(Circle())
                            .frame(width: 5, height: 5)
                        Text("直播中")
                            .font(.system(size: 10, weight: .bold))
                            .foregroundColor(.white)
                    }
                    .background(
                        Capsule().fill(Color(hex: 0xF83A74))
                            .frame(width: 50, height: 16)
                    )
                }
            }
            .overlay(
                
                HStack(spacing: 0) {
                    
                    HomeNavTabBtn(tab: .attention)
                    HomeNavTabBtn(tab: .recommend)
                    HomeNavTabBtn(tab: .location)

                }
            )
            
            // 搜索区域：搜索框+搜索分类按钮
            HStack {
                // 搜索框
                // 搜索框,搜索框由二维码扫描按钮+搜索输入框+搜索按钮组成
                HStack(spacing: 0) {
                    
                    Button {
                        
                    } label: {
                        Image("home_nav_search_qrcode")
                            .resizable()
                            .aspectRatio(contentMode: .fit)
                            .padding(8)
                            .frame(maxHeight: .infinity)
                    }
                    
                    
                    Divider()
                        .frame(width: 2, height: 20)
                        .foregroundColor(.black.opacity(0.5))
                    
                    
                    HStack(spacing: 0) {
                        HomeSearchHotKeyWordView()
                            .background(Color.white)
                            .onTapGesture {
                                withAnimation {
                                    customTabbarVM.atFront = false
                                    isActive.toggle()
                                }
                            }
                        
                        NavigationLink(destination: SearchGoodsView(), isActive: $isActive) {
                            
                        }
                    }
                    
                    .padding(.horizontal, 16)
                    

                    Button {
                        
                    } label: {
                        Text("搜索")
                            .font(.system(size: 14))
                            .foregroundColor(.black.opacity(0.8))
                            .padding(.horizontal, 15)
                            .frame(maxHeight: .infinity)
                            .background(
                                RoundedRectangle(cornerRadius: 20)
                                    .fill(Color(hex: 0xFBE536))
                            )
                    }


                }
                .padding(.leading, 4)
                .overlay(
                    RoundedRectangle(cornerRadius: 20)
                        .stroke(Color(hex: 0xFBE536), lineWidth: 2)
                )
               
                
                Button {
                    
                } label: {
                    Image("home_nav_classify")
                        .resizable()
                        .aspectRatio(contentMode: .fit)
                        .frame(maxHeight: .infinity)
                }

            }
            
            .frame(height: 40)
        }
        
        .background(Color.white)
    }
}


enum HomeNavTab: Hashable {
    case attention
    case recommend
    case location
    
    var title: String {
        switch self {
        case .attention:
            return "关注"
        case .recommend:
            return "推荐"
        case .location:
            return "北京"
        
        }
    }
}

struct HomeNavTabBtn: View {
    @EnvironmentObject var locationManager: LocationManager
    @EnvironmentObject var homeVM: HomeViewModel
    var tab: HomeNavTab
    
    var body: some View {
        
        Button {
            
            withAnimation {
                homeVM.currNavTab = tab
            }
            
        } label: {
            ZStack(alignment: .trailing) {
                
                let tabTitle = (tab == .location && locationManager.cityName != nil) ? locationManager.cityName! : tab.title
                if tab == .location {
                    Text(tabTitle.prefix(tabTitle.count - 1))
                        .font(.system(size: 16,weight: homeVM.currNavTab == tab ? .bold : .medium))
                        .padding(.horizontal, 15)
                        .scaleEffect(homeVM.currNavTab == tab ? 1.3 : 1)
                } else {
                    Text(tabTitle)
                        .font(.system(size: 16,weight: homeVM.currNavTab == tab ? .bold : .medium))
                        .padding(.horizontal, 15)
                        .scaleEffect(homeVM.currNavTab == tab ? 1.3 : 1)
                }
                
                
                if tab == .location {
                    Image(systemName: "chevron.down")
                        .font(.system(size: 6))
                        .foregroundColor(Color.black.opacity(0.4))
                        .opacity(homeVM.currNavTab == .location ? 1 : 0)
                }
            }
            
            .foregroundColor(Color.black.opacity(homeVM.currNavTab == tab ? 0.7 : 0.3))

        }

        
    }
}
